<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>人员管理</title>
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="shortcut icon" href="favicon.ico">
		<link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">

		<link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
		<link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
		<link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
		<link rel="stylesheet" href="__STATIC__/zTreeStyle/demo.css" type="text/css">
		<link rel="stylesheet" href="__STATIC__/zTreeStyle/zTreeStyle.css" type="text/css">
		<link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
		<link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
		<style>
			.alerts {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
			}
			
			.alerts .alerts_content {
				background: #fff;
				position: fixed;
				top: 50%;
				left: 50%;
				width: 700px;
				min-height: 500px;
				margin: -220px 0 0 -350px;
				padding: 5px;
				border: 4px solid #ccc/* margin 负值为宽高的一半 */
			}
			
			.wait {
				display: none;
				background: #f4f4f5;
				position: fixed;
				top: 50%;
				left: 50%;
				width: 700px;
				min-height: 250px;
				margin: -220px 0 0 -350px;
				padding: 5px;
				border: 4px solid #ccc/* margin 负值为宽高的一半 */
			}
			
			.alerts .alerts_content h3 {
				font-weight: normal;
				text-align: left;
				line-height: 24px;
				font-size: 20px;
				padding-left: 1%;
				width: 99%;
				margin-bottom: 30px;
				background: #d0e0e0
			}
			
			.alerts .alerts_content .alerts_form {
				width: 100%;
			}
			
			.alert_addNewZone_tree {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
			}
			
			.alert_addNewZone_tree .alert_addNewZone_content_tree {
				background: #fff;
				position: fixed;
				top: 50%;
				left: 50%;
				width: 500px;
				height: 300px;
				margin: -150px 0 0 -250px;
				padding: 5px;
				border: 4px solid #ccc/* margin 负值为宽高的一半 */
			}
			
			.alert_addNewZone_tree .alert_addNewZone_content_tree h3 {
				font-weight: normal;
				text-align: left;
				line-height: 24px;
				font-size: 20px;
				padding-left: 1%;
				width: 99%;
				margin-bottom: 30px;
				background: #d0e0e0
			}
			
			.alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form {
				width: 100%;
			}
			
			.alert_addNewZone_tree .alert_addNewZone_content_tree .alert_addNewZone_form_tree {
				height: 280px;
				overflow: scroll;
			}
			
			.alerts .alerts_content .alerts_form form {
				width: 100%;
			}
			
			.alerts .alerts_content .alerts_form form div {
				margin-bottom: 30px;
				width: 100%;
				text-align: center;
			}
			
			.alerts .alerts_content .alerts_form form div label {
				display: inline-block;
				width: 130px;
				text-align: right;
			}
			
			.alerts .alerts_content .alerts_form form div:nth-of-type(1) input {
				margin-right: 28px;
			}
			
			.mtp {
				margin-top: 3px;
			}
			
			.no-padding {
				padding: 0;
			}
			
			#gopage {
				color: blue;
				cursor: pointer;
			}
			
			#firstpage {
				cursor: pointer;
			}
			
			.alert_addNewZone_tree {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgb(255, 255, 255, 0.7);
				z-index: 200
			}
			
			.alert_addNewZone_tree .alert_addNewZone_content_tree {
				background: #fff;
				position: fixed;
				top: 50%;
				left: 50%;
				width: 500px;
				height: 350px;
				margin: -150px 0 0 -250px;
				padding: 5px;
				border: 4px solid #ccc/* margin 负值为宽高的一半 */
			}
			
			.wait,
			.waits {
				background: #f4f4f5;
				position: fixed;
				top: 50%;
				left: 50%;
				width: 500px;
				height: 300px;
				margin: -150px 0 0 -250px;
				padding: 5px;
				border: 4px solid #ccc/* margin 负值为宽高的一半 */
			}
			
			.alert_addNewZone_tree .alert_addNewZone_content_tree h3 {
				font-weight: normal;
				text-align: left;
				line-height: 24px;
				font-size: 20px;
				padding-left: 1%;
				width: 99%;
				margin-bottom: 10px;
				background: #d0e0e0
			}
			
			 ::-webkit-scrollbar-track {
				background-color: #fff;
			}
			
			::-webkit-scrollbar {
				width: 6px;
				background-color: #fff;
			}
			
			::-webkit-scrollbar-thumb {
				background-color: #ccc;
			}
		</style>
	</head>

	<body class="white-bg" style="color:#333;padding:3px;">
		<div class="page-heade">
			<h2 class="title_color text-center">人员管理</h2>
		</div>
		<div class="col-md-12 mtp no-padding">
			<div class="col-md-2">
				<div>
					<ul id="treeDemo" class="ztree"></ul>
				</div>
			</div>
			<div class="col-md-10 no-padding">
				<table class="table table-bordered" style="width: 100%;">
					<tbody>
						<tr>
							<td colspan="6">
								<button class="btn btn-primary addEmployee">新增职员</button>
								<!--	<button class="btn btn-primary newdru">导入新职员</button>
	            				<button class="btn btn-primary">批量修改新职员</button>-->
								<button class="btn btn-primary">回收站</button>
								<button class="btn btn-primary reload">刷新</button>
							</td>
						</tr>
						<form action="#" method="post" id="form_check">
							<tr>
								<td>职员姓名</td>
								<td><input type="text" name="em_name" value='{$data.em_name}' class="form-control" /></td>
								<td>部门</td>
								<td>
									<input type="text" name="de_name" id="de_name" value='{$data.de_name}' class="form-control" />
								</td>
								<td>查询类型</td>
								<td>
									<select name="check_type" id="check_type" class="form-control select" style="padding: 2px 12px">
										<option value="1">本部门及其下属部门</option>
										<option value="2" {if condition='$data.check_type=="2"' }selected{/if}>本部门</option>
										<option value="3" {if condition='$data.check_type=="3"' }selected{/if}>下属部门</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>用户名</td>
								<td><input type="text" name="login_name" value='{$data.login_name}' class="form-control" /></td>
								<td>身份证号码</td>
								<td>
									<input type="text" name="id_card" value='{$data.id_card}' class="form-control" />
								</td>
								<td>手机号码</td>
								<td>
									<input type="text" name="mobile" value='{$data.mobile}' class="form-control" />
								</td>
							</tr>
							<tr>
								<td>是否已开通用户</td>
								<td>
									<select name="is_login" id="is_login" class="form-control select" style="padding: 2px 12px">
										<option value='1'>全部</option>
										<option value='2' {if condition='$data.is_login=="2"' }selected{/if}>已开通</option>
										<option value='3' {if condition='$data.is_login=="3"' }selected{/if}>未开通</option>
									</select>
								</td>
								<td>目前状态</td>
								<td>
									<select name="state" id="state" class="form-control select" style="padding: 2px 12px">
										<option value='0'>全部</option>
										<option value='1' {if condition='$data.state=="1"' }selected{/if}>在职</option>
										<option value='2' {if condition='$data.state=="2"' }selected{/if}>试用</option>
										<option value='3' {if condition='$data.state=="3"' }selected{/if}>离职</option>
									</select>
								</td>
								<td>角色</td>
								<td>
									<input type="text" name="role" value='{$data.role}' class="form-control" />
								</td>
							</tr>
							<tr>
								<td>角色组</td>
								<td colspan="3"><input type="text" style="width:350px;" name="role_group" value='{$data.role_group}' class="form-control" /></td>
								<td>岗位名称</td>
								<td>
									<input type="text" name="job_name" value='{$data.job_name}' class="form-control" />
								</td>

							</tr>
							<tr>
								<td colspan="6" class="text-center">
									<input type="button" value="查询" class="btn btn-info" id="submit_btn" />
									<input type="button" value="清空查询条件" id="reset" class="btn btn-info" />
									<input type="button" value="导出完整版Excel" id="dcw" class="btn btn-info" />

								</td>

							</tr>
							<input type="hidden" value="{$page}" name="page" id="page_hid" />
							<input type="hidden" value="{$list}" name="list" id="pagesize_hid" />
						</form>
					</tbody>
				</table>
				{if condition="$sum neq 0"}
				<table class="table table-striped table-bordered table-hover bud_hei text-center" style="width: 100%;">
					<thead>
						<tr class='info'>
							<td style="width:4%;">序号</td>
							<td style="width:7%;">姓名</td>
							<td style="width:7%;">用户名</td>
							<td style="width:7%;">所属部门</td>
							<td style="width:11%;">岗位名称</td>
							<td style="width:12%;">所属其他部门</td>
							<td style="width:12%;">身份证号码</td>
							<td style="width:8%;">手机号码</td>
							<td style="width:8%;">角色</td>
							<td style="width:11%;">角色分组</td>
							<td style="width:5%;">目前状态</td>
							<td style="width:5%;">维护</td>
						</tr>

					</thead>
					<tbody>
						{volist name="em_list" id="voem" key='emi'}
						<tr style="font-size: 14px;">
							<td style="width:4%;">{$emi}</td>
							<td style="width:7%;">{$voem.em_name}</td>
							<td style="width:7%;">{$voem.login_name}</td>
							<td style="width:7%;">{$voem.de_name}</td>
							<td style="width:11%;">
								<div style="width:100%;max-height: 60px;overflow-y: auto;">
									{volist name="job_list" id="voj"} {if condition="$voem.id eq $voj.em_id"}
									<div jid="{$voj.job_id}">{$voj.job_name}</div>
									{/if} {/volist}
								</div>
							</td>
							<td style="width:12%;max-height: 60px;">
								<div style="width:100%;max-height: 60px;overflow-y: auto;">
									{volist name="other_depart" id="voode"} {if condition="$voem.id eq $voode.em_id"}
									<div did="{$voode.de_id}">{$voode.de_name}</div>
									{/if} {/volist}
								</div>

							</td>
							<td style="width:12%;">{$voem.idcard}</td>
							<td style="width:8%;">{$voem.mobile}</td>
							<td style="width:11%;">
								<div style="width:100%;max-height: 60px;overflow-y:auto;">
									{volist name="role_arr" id="vor"} {if condition="$voem.id eq $vor.em_id"}
									<div rid="{$vor.role_id}">{$vor.role_name}</div>
									{/if} {/volist}
								</div>
							</td>
							<td style="width:11%;">
								<div style="width:100%;max-height: 60px;overflow-y: auto;">
									{volist name="role_group_arr" id="vorg"} {if condition="$voem.id eq $vorg.em_id"}
									<div gid="{$vorg.group_id}">{$vorg.group_name}</div>
									{/if} {/volist}
								</div>
							</td>
							<td style="width:5%;">
								{if condition="$voem.state eq 1"} 在职 {elseif condition="$voem.state eq 2"} 试用 {else/} 离职 {/if}
							</td>
							<td style="width:5%;">
								<a href='{:url("Employees/newem")}?emid={$voem.id}'>编辑</a>
							</td>
						</tr>

						{/volist}

					</tbody>

				</table>

				 <h5 class="text-center" id="pagesc" style="font-size: 16px;font-weight: 500">
					总共有{$sum}条记录，第<span id="currentPage">{$page}</span>/<span id="maxPage">{$maxpage}</span>页,当前页<input id="page" type="text"  style="width: 40px" value="{$page}"/><span id="gopage">Go</span>&nbsp;
					
					<a href="javascript:;" onclick="prePage()" style="font-size: 16px;font-weight: bold;">上一页</a>
					<a href="javascript:;" onclick="nextPage()" style="font-size: 16px;font-weight: bold;">下一页</a>
					&nbsp;<span id="fistpage" style="font-weight: bold;font-size: 16px;cursor: pointer;">首页</span>&nbsp;&nbsp;
					每页显示
					<select id="pagesize">
						<option value='5' {if condition="$list eq 5"}selected{/if}>5条</option>
						<option value='10'{if condition="$list eq 10"}selected{/if}>10条</option>
						<option value='15'{if condition="$list eq 15"}selected{/if}>15条</option>
						<option value='20'{if condition="$list eq 20"}selected{/if}>20条</option>
					</select>
				</h5> {else/}
				<h3>对不起没有查询到符合条件的信息</h3> {/if}
			</div>
		</div>

		<!-- 全局js -->
		<script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
		<script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
		<!-- Peity -->
		<script src="__STATIC__/layout/js/plugins/peity/jquery.peity.min.js"></script>

		<!-- jqGrid -->
		<script src="__STATIC__/layout/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
		<script src="__STATIC__/layout/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

		<!-- 自定义js -->
		<script src="__STATIC__/layout/js/content.js?v=1.0.0"></script>
		<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>

		<!-- ztree -->
		<script type="text/javascript" src="__STATIC__/zTreeStyle/jquery.ztree.core.js"></script>
		<script type="text/javascript" src="__STATIC__/zTreeStyle/jquery.ztree.excheck.js"></script>
		<!--统计代码，可删除-->
		<script type="text/javascript">
			$(".newdru").click(function() {
				location.href = "{:url('newdru')}"
			})
			$("#dcw").click(function() {
				window.open("{:url('dcw')}")
			})
			$(".reload").click(function() {
				location.href = location.href;
			})
			//点击开启弹框
			$(".addEmployee").click(function() {
				location.href = "{:url('Employees/newem')}";

			})
			//翻页
			$("#pagesize").change(function() {
				$("#pagesize_hid").val($(this).val());
				$("#page_hid").val(1);
				document.getElementById("form_check").submit();
			});
			$("#gopage").click(function() {
				$("#page_hid").val($("#page").val());
				document.getElementById("form_check").submit();
			});
			function prePage(){
					var prePageNum=Number($("#currentPage").text())
//					console.log(prePageNum);
					if(prePageNum>1){
						$("#page_hid").val(Number($("#page").val()-1));
						document.getElementById("form_check").submit();
					}else{
						alert("已经是第一页！")
					}
			}
			function nextPage(){
					var prePageNum=Number($("#currentPage").text())
					var nextPage = Number($("#maxPage").text())		
					console.log(prePageNum,nextPage);
					if(nextPage>prePageNum){
						console.log()
						$("#page_hid").val(Number($("#page").val())+Number(1));
						document.getElementById("form_check").submit();
					}else{
						alert("已经是最后一页！")
					}
			}
			$("#fistpage").click(function() {
				$("#page_hid").val(1);
				document.getElementById("form_check").submit();
			});
			$("#submit_btn").click(function() {
				$("#page_hid").val(1);
				document.getElementById("form_check").submit();
			})
			$("#reset").click(function() {
				$("input[type='text']").val("");
				$("#check_type").val(1);
				$("#is_login").val(1);
				$("#state").val(0);
				$("#page_hid").val(1);
				document.getElementById("form_check").submit();
			})
			<!--
			var setting = {
				check: {
					enable: false,

				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: zTreeOnClick
				}
			};

			var zn = '{$alldepart}';
			var zNodes = JSON.parse(zn);

			var code;

			function setCheck() {
				var type = $("#level").attr("checked") ? "level" : "all";
				setting.check.radioType = type;
				showCode('setting.check.radioType = "' + type + '";');
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);

			}

			function showCode(str) {
				if(!code) code = $("#code");
				code.empty();
				code.append("<li>" + str + "</li>");
			}

			$(document).ready(function() {
				setCheck();
				$("#level").bind("change", setCheck);
				$("#all").bind("change", setCheck);
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
				treeObj.expandAll(true)
			});

			function zTreeOnClick(event, treeId, treeNode) {
				$("#de_name").val(treeNode.name);
				$("#page_hid").val(1);
				document.getElementById("form_check").submit();
			};
		</script>
	</body>

</html>